<template>
  <div class="nameMatch-container">
    <van-nav-bar title="名字配对">
      <template #left>
        <span @click="$router.back()">
        <svg-icon style="margin-right: 3px;" icon-class='fanhui' width="23px" height="23px" class="icon"/>
        </span>
        返回
      </template>
    </van-nav-bar>
    <div class="circle-progress">
      <div class="progress-text"></div>
      <div class="num">{{ matchRate }}%</div>
      <canvas class="progress-canvas" width="200" height="200"></canvas>
    </div>
    <van-button type="default" @click="isDialogShow=true" class="searchBtn">
      配对一下
      <template #icon>
        <svg-icon icon-class='pipei' width="20px" height="20px" class="icon"/>
      </template>
    </van-button>
    <van-dialog
      v-model="isDialogShow"
      title="请输入两个名字吧~"
      show-cancel-button
      @confirm="nameVerify"
      confirm-button-color="#ac92eb"
      className="offDialog"
    >
      <div class="nameWrap">
        <van-field v-model="name1" type="文本" placeholder="姓名1" class="nameInput"/>
        <van-field v-model="name2" type="文本" placeholder="姓名2" class="nameInput"/>
      </div>
    </van-dialog>
    <div class="content">
      {{ content }}
    </div>
  </div>
</template>

<script>
// 引入拼音
import pinyin from 'pinyin'
import { matchText } from './nameRelation'

export default {
  name: 'NameMatch',
  data () {
    return {
      progress: 0,
      canvas: null,
      ctx: null,
      x: 0,
      y: 0,
      radius: 0,
      startAngle: -Math.PI / 2,
      endAngle: 0,
      matchRate: 0,
      isDialogShow: false,
      name1: '',
      name2: '',
      content: ''
    }
  },
  created () {

  },
  mounted () {
    this.canvas = this.$el.querySelector('.progress-canvas')
    this.ctx = this.canvas.getContext('2d')
    this.x = this.canvas.width / 2
    this.y = this.canvas.height / 2
    this.radius = this.canvas.width / 2 - 10
    this.drawCircleProgress()
    this.startAnimation()
  },
  methods: {
    calcMatch (name1, name2) {
      // 将输入的中文姓名转换为拼音
      const pinyin1 = pinyin(name1, {
        style: pinyin.STYLE_NORMAL // 不带声调风格
      }).join('')
      const pinyin2 = pinyin(name2, {
        style: pinyin.STYLE_NORMAL // 不带声调风格
      }).join('')

      // 计算姓名长度
      const len1 = pinyin1.length
      const len2 = pinyin2.length

      // 取两个姓名拼音中较短的长度作为循环次数
      const loopLen = (len1 < len2) ? len1 : len2

      // 将拼音字符串转换为数组
      const arr1 = pinyin1.split('')
      const arr2 = pinyin2.split('')

      // 记录匹配成功的数量
      let matchCount = 0

      // 循环判断每个拼音是否相等
      for (let i = 0; i < loopLen; i++) {
        if (arr1[i] === arr2[i]) {
          matchCount++
        }
      }

      // 计算匹配度
      let matchRate = (matchCount / loopLen * 100) + 30
      if (matchRate >= 100) {
        matchRate = 99.99
      }

      return matchRate.toFixed(2) // 保留两位小数返回结果
    },
    drawCircleProgress () {
      this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height)
      // 绘制背景圆环
      this.ctx.beginPath()
      this.ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2)
      this.ctx.strokeStyle = '#fff'
      this.ctx.lineWidth = 10
      this.ctx.stroke()

      // 绘制进度圆弧
      this.endAngle = this.startAngle + this.progress / 100 * Math.PI * 2
      this.ctx.beginPath()
      this.ctx.arc(this.x, this.y, this.radius, this.startAngle, this.endAngle)
      this.ctx.strokeStyle = '#967adc'
      this.ctx.lineWidth = 10
      this.ctx.stroke()
    },
    startAnimation () {
      setInterval(() => {
        if (this.progress < this.matchRate) {
          this.progress++
          this.drawCircleProgress()
        }
      }, 10)
    },
    nameVerify () {
      if (this.name1 === '' || this.name2 === '') {
        return this.$toast.fail('名字不能为空')
      }
      this.matchRate = this.calcMatch(this.name1, this.name2)
      this.content = matchText(this.matchRate)
      this.name1 = ''
      this.name2 = ''
    }
  }
}
</script>

<style scoped lang="less">
.nameMatch-container {
  .circle-progress {
    position: absolute;
    top: 13%;
    left: 50%;
    display: inline-block;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    overflow: hidden;
    transform: translateX(-50%);

    .progress-text {
      position: absolute;
      width: 150px;
      height: 150px;
      border-radius: 50%;
      background-color: #ac92eb;
      overflow: hidden;

    }

    .num {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      font-size: 24px;
      font-weight: bold;
    }

    .progress-canvas {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
    }

  }

  .searchBtn {
    position: absolute;
    width: 150px;
    opacity: .85;
    border-radius: 20px;
    top: 40%;
    left: 50%;
    transform: translateX(-50%);
  }

  .offDialog {
    height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .nameWrap {
      display: flex;

      ::v-deep .van-cell {
        font-size: 15px;
        height: 50px;
      }
    }
  }

  .content {
    position: absolute;
    top: 50%;
    padding: 20px;
    font-size: 14px;
    letter-spacing: 1px;
  }

  .progress-text:before,
  .progress-text:after {
    content: '';
    position: absolute;
    left: 50%;
    min-width: 90vw;
    min-height: 90vw;
    border-radius: 50%;
    background-color: #fff;
    animation: 2s rotate infinite linear;
  }

  .progress-text:before {
    bottom: 20%;
    border-radius: 45%;
    -webkit-animation-duration: 10s;
    animation-duration: 10s;
  }

  .progress-text:after {
    bottom: 10%;
    opacity: 0.5;
    border-radius: 47%;
    animation-duration: 10s;
  }

  @-webkit-keyframes rotate {
    0% {
      transform: translate(-50%, 0) rotateZ(0deg);
    }
    50% {
      transform: translate(-50%, -2%) rotateZ(180deg);
    }
    100% {
      transform: translate(-50%, 0%) rotateZ(360deg);
    }
  }

  @keyframes rotate {
    0% {
      transform: translate(-50%, 0) rotateZ(0deg);
    }
    50% {
      transform: translate(-50%, -2%) rotateZ(180deg);
    }
    100% {
      transform: translate(-50%, 0%) rotateZ(360deg);
    }
  }
}
</style>
